<template>
  <div class="mosaic-progress">
    <span :title="title(d)" class="mosaic-block" :class="'percent-'+d.percent" v-for="(d, i) in data" :key="i">
    </span>
  </div>
</template>

<script>
export default {
  props: [
    "data"
  ],
  methods: {
    title(data) {
      return data.info + "：" + data.percent + "%";
    }
  }
}
</script>

<style lang="stylus">

.mosaic-progress
  padding 0

  .mosaic-block
    display inline-block
    width 10px
    height 10px
    border 1px solid #409EFF
    border-radius 2px
    margin-right 2px

    &.percent-0
      background rgb(255, 255, 255)

    &.percent-10
      background rgb(236, 245, 255)

    &.percent-20
      background rgb(217, 236, 255)

    &.percent-30
      background rgb(198, 226, 255)

    &.percent-40
      background rgb(179, 216, 255)

    &.percent-50
      background rgb(160, 207, 255)

    &.percent-60
      background rgb(140, 197, 255)

    &.percent-70
      background rgb(121, 187, 255)

    &.percent-80
      background rgb(102, 177, 255)

    &.percent-90
      background rgb(83, 168, 255)

    &.percent-100
      background rgb(64, 158, 255)
      box-shadow: 0px 0px 2px 2px rgb(179, 216, 255)

</style>